<template>
  <div class="blog_main_one_item">
    <h1 class="blog_main_one_title">关于</h1>
    <div class="tags-group-all">
      <div class="tags-group-container">
        <div class="tags-group-wrapper" v-for="index in 2" :key="index">
          <div class="a_c">
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/Vue.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/java.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
          </div>
          <div class="a_c">
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/maven.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/mysql.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
          </div>
          <div class="a_c">
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/redis.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/Vue.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
          </div>
          <div class="a_c">
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/mysql.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
            <div class="blog_main_one_item_icon">
              <Image src="/toolIco/spring.png" width="75px" hidden="75px" lazy>
                <template #placeholder>
                  <div class="imgLoading"></div>
                </template>
              </Image>
            </div>
          </div>
        </div>
      </div>
    </div>

    <transition name="slide-left">
      <div class="mask" v-show="maskState">
        <h1>去看看</h1>
        <div>
          <Icon type="md-arrow-round-forward" size="80" color="#fff" />
        </div>
      </div>
    </transition>
  </div>
  <div
    class="overlay"
    @mouseover="a_cMouseOver"
    @mouseout="a_cMouseOut"
    @click="router.push({ name: 'About' })"
  ></div>
</template>
<script setup>
  const router = useRouter();

  //鼠标悬浮
  let maskState = ref(false);
  function a_cMouseOver() {
    maskState.value = true;
  }
  function a_cMouseOut() {
    maskState.value = false;
  }
</script>
<style scoped>
  .blog_main_one_item {
    height: 270px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
  }

  /* 关于和留言start */
  .mask {
    background-color: rgba(66, 90, 239, 0.9);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px 0 0 35px;
  }

  .mask h1 {
    font-size: 65px;
    letter-spacing: 3px;
    font-weight: 300;
  }

  .overlay {
    width: 100%;
    height: 270px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }

  .tags-group-all {
    cursor: pointer;
  }

  .blog_main_one_item div {
    display: flex;
  }

  .blog_main_one_title {
    color: #363636;
    font-size: 40px;
    margin: 30px;
  }

  .blog_main_one_item_icon {
    background-color: #fff;
    width: 110px;
    height: 110px;
    box-shadow: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    border-radius: 20px;
  }

  .blog_main_one_item_icon img {
    width: 75px;
    height: 75px;
  }

  .a_c {
    display: flex;
    flex-direction: column;
  }

  @keyframes rowup {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(-50%);
    }
  }

  .tags-group-all {
    transform: rotate(-30deg);
  }

  .tags-group-wrapper {
    margin-top: -20px;
    display: flex;
    flex-wrap: nowrap;
    animation: rowup 10s linear infinite;
  }

  /* 关于和留言end */
</style>
